<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>英文单词背诵表</title>
  <link rel="stylesheet" href="./lib/layui/css/layui.css">
  <link rel="stylesheet" href="./lib/swiper/swiper.min.css">
  <link rel="stylesheet" href="./css/base.css">
  <style>
    body {
      margin: 10px;
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    }

    .layui-tab-item {
      padding: 10px;
    }

    #fileInput {
      display: none;
    }
  </style>
</head>

<body>
  <input type="file" id="fileInput" accept="text/plain">
  <button id="btnChooseFile" type="button" class="layui-btn layui-btn-danger layui-btn-sm">选择题目数据文件</button>

  <!-- 选项卡 -->
  <div class="layui-tab layui-tab-card" lay-allowClose="true">
    <ul class="layui-tab-title">
    </ul>
    <div class="layui-tab-content">
    </div>
  </div>

  <script>
    window.addEventListener('load', function () {

      // 获取元素
      let fileChoose = document.querySelector('#fileInput')
      let tabTitle = document.querySelector('.layui-tab-title')
      let tabContent = document.querySelector('.layui-tab-content')
      let ulQues = document.querySelector('#ulQuestion')
      let ulQues1 = document.querySelector('#ulQuestionSingle')
      let ulQues2 = document.querySelector('#ulQuestionMul')
      let ulQues3 = document.querySelector('#ulQuestionSingleCode')

      console.dir(ulQues)
      // 一：选择题目文件 加载数据，并生成列表 --------------------------------
      btnChooseFile.addEventListener('click', function () {
        fileChoose.click()
      })
      fileChoose.addEventListener('change', selectFile);

      // 二：加载时 从本地 读取数据，并显示 -----------------------------------
      // 数据操作对象
      let dataHelper = new DataHelper('engwordBank')
      // 从本地 获取 数据
      let bank = dataHelper.getData();
      // 初始化
      initData()
      function initData() {
        if (bank) {
          // 如果存在，则创建新的 问题仓库，并将 本地问题数据 传入
          bank = new EngwordBank(bank)
          console.log(bank)
          // 生成阶段 tab
          makeTabList(bank.stages)
        }
      }

      // 1.选择文件 -----------------------------------------------------
      function selectFile() {
        if (this.files.length === 0) {
          console.log('请选择文件！');
          return;
        }
        // 创建文件读取器
        const reader = new FileReader();
        // 设置读取成功后的 回调函数
        reader.onload = function fileReadCompleted() {
          // 1.创建题库对象 
          bank = new EngwordBank()
          // 2.初始化题库数据
          bank.initData(reader.result)
          // 3. 保存到本地
          dataHelper.saveData(bank)
          // 4.生成阶段 tab
          makeTabList(bank.stages)
        };
        // 开始读取文件
        reader.readAsText(this.files[0]);
      }

      // 二：生成阶段 Tab列表 -------------------------------------------------
      function makeTabList(stages) {
        if (!stages) return
        // console.log(questions)
        let arrTitle = []
        let arrContent = []
        for (let stage of stages) {
          arrTitle.push(`<li>${stage.name}阶段</li>`)
          arrContent.push(makeDayList(stage))
        }
        tabTitle.innerHTML = arrTitle.join('')
        tabContent.innerHTML = arrContent.join('')

        tabTitle.children[0] && tabTitle.children[0].click()
      }

      // 三：生成阶段 单词列表--------------------------------------------------
      function makeDayList(stage) {
        const conHtml = template('tpl-day', stage)
        return conHtml
      }

      // 生成 轮播英文表格-----------------------------------------------------
      const swiper = new Swiper('.swiper-container', {
        autoHeight: true, //enable auto height
        spaceBetween: 20,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">Day' + (index + 1) + '</span>';
          }
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      });
    })

  </script>

  <!-- 答题卡模板 -->
  <script type="text/html" id="tpl-day">
    <div class="layui-tab-item stage">
    {{if daylist.length>0}}
      <div class="swiper-container">
        <div class="swiper-wrapper">
          {{each daylist}}
          <div class="swiper-slide">
          <h3>{{$value.name}}</h3>
          <table>
            <tr>
              <th>名称</th>
              <th>音标</th>
              <th>单双标签</th>
              <th>含义</th>
              <th>备注</th>
            </tr>
            {{each $value.words}}
            <tr>
              <td>{{$value[0]}}</td>
              <td>{{$value[1]}}</td>
              <td>{{$value[2]}}</td>
              <td>{{$value[3]}}</td>
              <td>{{$value[4]}}</td>
            </tr>
            {{/each}}
          </table>
          </div>
          {{/each}}
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Pagination -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
      {{else}}
          <h2>{{name}}阶段 暂无数据</h2>
      {{/if}}
    </div>
  </script>



  <!-- 导入新版(v2.6.7)的layui JS文件 -->
  <script src="./lib/layui/layui.js"></script>
  <script src="./lib/jquery.min.js"></script>
  <script src="./lib/swiper/swiper.min.js"></script>
  <!-- 加载 模板引擎js -->
  <script src="./lib/template-web.js"></script>
  <script src="./js/DataHelper.js"></script>
  <script src="./js/EngwordBank.js"></script>
</body>

</html>